<template>
  <a-modal
    :title="currTitle"
    :width="450"
    :visible="visible"
    :closable="false"
    :maskClosable="closable">
    <template slot="footer">
      <a-button v-if="closable" @click="close">关闭</a-button>
      <a-button type="primary" @click="roleOk">确认</a-button>
    </template>

    <a-form>
      <a-form-item
        :labelCol="{span:4}"
        :wrapperCol="{span:20}"
        style="margin-bottom:10px"
        :validate-status="validate_status">
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>您隶属于多部门，请选择当前所在部门</span>
          </template>
          <a-avatar style="backgroundColor:#87d068" icon="gold"/>
        </a-tooltip>
        <a-select v-model="roleId" :class="{'valid-error':validate_status=='error'}" placeholder="请选择角色"
                  style="margin-left:10px;width: 80%">
          <a-icon slot="suffixIcon" type="gold"/>
          <a-select-option v-for="d in roleList" :key="d.value" :value="d.value">
            {{ d.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>


  </a-modal>

</template>

<script>
  import {getAction, putAction} from '@/api/manage'
  import Vue from 'vue'
  import store from '@/store/'
  import {USER_INFO} from "@/store/mutation-types"

  export default {
    name: 'RoleSelect',
    props: {
      title: {
        type: String,
        default: "角色选择",
        required: false
      },
      closable: {
        type: Boolean,
        default: false,
        required: false
      },
      username: {
        type: String,
        default: "",
        required: false
      }
    },
    watch: {
    },
    data() {
      return {
        currTitle: this.title,
        visible: false,
        roleList: [],
        roleId: '',
        validate_status: "",
        currRoleName: "",
      }
    },
    created() {
    },
    methods: {
      loadRoleList() {
        this.roleId = Vue.ls.get('RoleId')
        return new Promise(resolve => {
          let url = "/sys/user/queryUserRoleList"
          this.currRoleName = ''
          getAction(url).then(res => {
            if (res.success) {
              let roleList = res.result
              if (roleList && roleList.length > 0) {
                for (let i of roleList) {
                  if (i.value == this.roleId) {
                    this.currRoleName = i.label
                    break
                  }
                }
              }
              this.roleList = roleList
              if (this.currRoleName) {
                this.currTitle = "当前角色 :（" + this.currRoleName + "）"
              }

            }
            resolve()
          })
        })
      },
      close() {
        this.roleClear()
      },
      roleOk() {
        if (!this.roleId) {
          this.validate_status = 'error'
          return false
        }
        let obj = {
          roleId: this.roleId
        }
        Vue.ls.set('RoleId', this.roleId)
        getAction("/sys/user/updateRoleStatus", obj).then(res => {
          if (res.success) {
            this.$router.go(0)
          }
        })
      },
      show() {
        //如果组件传值username此处就不用loadDepartList了
        this.loadRoleList().then(() => {
          this.visible = true
          if (!this.roleList || this.roleList.length <= 0) {
            this.roleClear()
          }
        })
      },
      roleClear() {
        this.visible = false
        this.validate_status = ''
        this.roleList = []
        this.roleId = ''
        this.currRoleName = ''
      },
    }

  }
</script>
<style scoped>
  .valid-error .ant-select-selection__placeholder {
    color: #f5222d;
  }
</style>